<!-- 话题 -->
<template>
    <view class="topic-item" @click="topicFn()"><img src="@/assets/image/icon14.png" alt=""><text>{{ props.topicItem.Title ?
        props.topicItem.Title : '话题' }}</text><img v-if="props.isHide" class="close-topic" @click.stop="topicCloseFn(item)"
            src="@/assets/image/icon47.png" alt="">
    </view>
    <van-popup v-model:show="showBottom" @click-overlay="showBottom = !showBottom" round :style="{ height: '80%' }"  position="bottom"
        close-icon="arrow-left">
        <view class="topic-list">
            <view class="topic-list-head">选择话题</view>
            <view class="topic-list-box">
                <view class="topic-item" @click="topicCheckFn(item)" v-for="item in topicList" :key="item.ID"><img
                        src="@/assets/image/icon14.png" alt=""><text>{{ item.Title }}</text></view>

            </view>
        </view>
    </van-popup>
</template>

<script setup>
import { toRefs } from "vue";
import { reactive, ref, getCurrentInstance, onMounted } from "vue"

import {
    TopicHot
} from "@/api/person/index.js"

let {proxy} = getCurrentInstance()

const emits = defineEmits(['topicCheck', 'topicClose'])
const props = defineProps({
    isHide: {
        type: Boolean,
        default: false
    },
    topicItem: {
        type: Object,
        default: () => {
            return {
                id:null,
                name:""
            }
         }
    }
})

const state = reactive({
    showBottom: false,
    formData: {
        address: ""
    },
    topicList: []
})

let { showBottom, topicList } = toRefs(state)
const topicFn = () => {
    state.showBottom = true
}

// 获取所有话题
const TopicHotFn = async () => {
    let data = await proxy.$get(TopicHot)
    if(data.code == 200){
        state.topicList = data.data
    }
}

// 选中话题
const topicCheckFn = (item) => {
    emits('topicCheck', item)
    state.showBottom = false
}

// 删除话题
const topicCloseFn = (item) => {
    emits('topicClose', item)
}

onMounted(() => {
    TopicHotFn()
})


</script>

<style lang="scss" scoped>
.topic-item {
    display: flex;
    width: max-content;
    border-radius: 44rpx;
    align-items: center;
    padding: 0 16rpx;
    height: 44rpx;
    background: #F4F4F4;
    color: #666666;
    font-size: 24rpx;

    img {
        width: 28rpx;
        height: 28rpx;
        margin-right: 5rpx;
    }
}

.topic-list {
    min-height: 30vh;
}

.topic-list-head {
    text-align: center;
    font-size: 32rpx;
    line-height: 64rpx;
    padding: 20rpx 0;
    font-weight: 600;
}

.close-topic {
    margin-left: 10rpx;
}
.topic-list-box{
    display: flex;
    flex-wrap: wrap;
    padding:20rpx;
    .topic-item{
        margin:0 20rpx 20rpx 0 ;
    }
}
</style>
